<template>
	<view class="content">
    <topHeight></topHeight>
    <view class="scan">
      <view class="iconfont icon-qrcode"></view>
      <text>扫一扫</text>
    </view>
    <weatherBox></weatherBox>
    <view v-show="true">
    <view class="middle">
      <view class="middle-one">
        <text>热点活动</text>
      </view>
      <view class="middle-two">
        <text>Activity</text>
      </view>
    </view>
      <view class="binding">
        <view class="binding-item" v-for="item in activity" :key="item.id">
        <view class="iconfont " :class="item.iconName"></view>
        <text>{{item.name}}</text>
        </view>
      </view>
    </view>
      <view v-show="true">
      <view class="middle">
        <view class="middle-one">
          <text>身份验证</text>
        </view>
        <view class="middle-two">
          <text>Auth</text>
        </view>
      </view>
      <view class="binding" @click="toLogin">
        <view class="binding-item">
          <view class="iconfont icon-suomima"></view>
          <text>学生绑定</text>
        </view>
      </view>
      </view>
    <view style="height: 20rpx"></view>
	</view>
</template>

<script>
import weatherBox from "./components/weatherBox";
import topHeight from "@/components/top-height";

export default {
  components: {
    weatherBox,
    topHeight,
  },
  data() {
    return {
      activity:[
        {
          id:1,
          name:'团委报名',
          iconName:'icon-xingqiu',
        },
        {
          id:2,
          name:'企模报名',
          iconName:'icon-deng',
        },
      ],
    }
  },
  mounted() {

  },
  methods: {
    toLogin(){
      uni.navigateTo({
        url:'../../components/Login'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  height: 100vh;
  background-color: #F1F1F1;
  padding: 50rpx 0 50rpx;
  .scan{
    margin: 0 0 20rpx 20rpx;
    width: 150rpx;
    height: 50rpx;
    //position: absolute;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:  25rpx;
    background-color: rgba(128,128,128,0.6);
    color: #FFFFFF;
    font-size: 28rpx;
  }

  .middle{
    font-size: 50rpx;
    margin: 60rpx 50rpx 30rpx;
    display: flex;
    justify-content: space-between;
    .middle-one{

    }
    .middle-two{
      color: #AAAAAA;
    }
  }
  .binding{
    width: 670rpx;
    height: 200rpx;
    background-color: #FFFFFF;
    border-radius: 15rpx;
    margin: 0 auto;
    box-shadow: 0 0 30rpx #DBDBDB;
    display: flex;
    .binding-item{
      width: 160rpx;
      height: 200rpx;
      //background-color: #6F6F6F;
      align-items: center;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing:-5rpx
    }
  }
}

</style>
